* {
    margin: 0;
    padding: 0;
}
button {
    outline: none;
    border: 0;
    cursor: pointer;
}
.big-box {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #aac4bc 0%,#eca8a8 100%,#eed5a9 100%);
    .box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-90%);
        width: 640px;
        height: 280px;
        overflow: hidden;
        background-color: pink;
        box-shadow: 1px 10px 30px -10px rgba(0,0,0,0.5);
        // 遮罩层
        &::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 640px;
            height: 280px;
            background-color: rgba(255,255,255,0.5);
            z-index: 3;
        }
        // 动画图片
        .box-img {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 950px;
            // filter: grayscale(100%);
            transform: translate(-50%,-50%);
            img {
                width: 100%;
                // alternate" 使动画先向前运行，然后向后运行
                animation: scale 15s infinite alternate;
            }
            @keyframes scale {
                0% {
                   transform: scale(1)
                }
                100% {
                    transform: scale(1.5);
                }
            }
        }
        // 主体盒子
        .main_box {
            position: absolute;
            display: flex;
            width: 100%;
            height: 100%;
            z-index: 5;
            background-color: transparent;
            .login_item {
                height: 60%;
                width: 80%;
                border-radius: 3px;
                color: #fff;
                text-align: center;
                background-color: rgba(188, 168, 170,0.5);
                h3 {
                    font-weight: 500;
                    font-size: 22px;
                    margin: 10px;
                }
                button {
                    margin-top: 20px;
                    width: 80%;
                    height: 40px;
                    color: #fff;
                    box-shadow: 1px 10px 30px -10px rgba(0,0,0,0.5);
                    background-color: rgba(255, 152, 0);
                }
            }
            // 左盒子
            .login,.sign_up {
                flex: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                .login_item {
                    .login_item();
                }
                
            }
            // 右盒子
            .sign_up {
                flex: 1;
                background-color: rgba(244, 244, 244,.8);
                .login_item {
                    button {
                        background-color: rgba(244, 67, 54);
                    }
                }
                
            }
        }
    }
}